<template>
    <!-- 组件模板内容 -->
    <div class="label_input mg_l12 pg_r12 ft16 bb_f7" @click="clicklabel($event.currentTarget)">
        <label class="cl666" :style="{width:width+'px'}">{{labelcopy}}</label>
        <input :type="inptype"  class="br0 cl666 ft16" style="height:50px;" v-bind:value="value" @compositionstart="compositionstartfn" @compositionend="compositionendfn($event.target.value,$event.target)" @input="changeValue($event.target.value,$event.target)" :maxlength="maxlength" :placeholder="placeholder" :disabled="isrealname" :class="{'isdisabled':isrealname}" v-if="labelcopy == '真实姓名' || labelcopy =='持卡人'">
        <input :type="inptype"  class="br0 cl666 ft16" style="height:50px;" v-bind:value="value" @compositionstart="compositionstartfn" @compositionend="compositionendfn($event.target.value,$event.target)" @input="changeValue($event.target.value,$event.target)" :maxlength="maxlength" :placeholder="placeholder" v-else>        
        <img src="../../static/imgs/exclamation_mark.png" class="name_declare" v-show="labelcopy == '真实姓名' || labelcopy =='持卡人'" @click="nameDeclare">
        <!-- <p class="placeholder ft14 clb3 tr" v-show="showPlaceholder">{{placeholder}}</p> -->
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Navtive API
     *  example : import widget from 'gapi/widget'
     */
    import clientUi from 'gapi/clientUi.js'
    /**
     *  引入Action
     *  example : import { someFunction } from './SomeAction'
     */
    
    /**
     *  引入Getter
     *  example : import { someFunction } from './SomeGetters'
     */

    export default {
        vuex: {
            getters: {
                
            },
            actions: {

            }
        },
        data:function(){
            return {
                showPlaceholder:true,
                cpLock:false,
            }
        },
        props:{
            labelcopy:{
                type:String, //label提示文字
            },
            placeholder:{
                type:String,// placeholder
            },
            width:{
                type:Number, //input 宽度
                default:64

            },
            cbfn:{
                type:String //input 值变化触发父组件函数名
            },
            inptype:{
                type:String,//input 类型
                default:'text'
            },
            value:{
                type:String,
                default:''
            },
            maxlength:{
                type:Number
            },
            isrealname:{
                type:Boolean,//实名认证后不可更改
                default:true
            }
        },
        methods: {
            clicklabel(ev){
                ev.querySelector('input').focus();
            },
            changeValue(val,target){
                if(!this.cpLock){
                    this.$emit(this.cbfn,val,target)
                }
            },
            compositionstartfn(){
                this.cpLock = true;
            },
            compositionendfn(val,target){
                this.cpLock = false;
                this.$emit(this.cbfn,val,target)
            },
            nameDeclare (){
                let that = this
                clientUi.showDialog('申明', '为了确保账户和资金的安全，同时遵循国家相关实名法规规定，账户一经实名认证通过，提现的账户信息就必须与账户信息完全一致才能互相绑定', function(data){

                },'知道了',' ')
            }
        },
        created (){
            
        }
    }

    
</script>

<!-- CSS 样式 -->
<!-- <style src="static/css/global.css"></style> -->
<style type="text/css">
    .label_input{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
    }
    .label_input input{
        flex-grow:2;
        padding-left:25px;
    }
    .label_input p{
        position: absolute;
        top: 0;
        right: 12px;
        line-height: 54px;
    }
    .label_input:last-child{
        border-bottom: 0;
    }
    input::-webkit-input-placeholder{
        text-align: left;
        font-size: 16px;
        color: #BBBBBB;
        letter-spacing: 0;
    } 
    .name_declare{
        width: 20px;
        height: 20px;
    }
    .isdisabled{
        background-color: white;        
    }
    input[disabled],input:disabled,input.disabled{
        color: #333;
        -webkit-text-fill-color: #333;
        -webkit-opacity:1;
        opacity: 1;
    }
</style>

